<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POSTMAN</title>
<link rel="stylesheet" href="./assets/bootstrap.min.css">
<style>
.field-row{
    margin-top:10px;
}
</style>
</head>
<body>
<div class="container" id="app">
    <h3 class="center">API 接口测试</h3>
    <div class="form-group">
        <label for="">方法</label>
        <div class="radio">
            <label><input type="radio" v-model="f.method" value="GET">GET</label>
            <label><input type="radio" v-model="f.method" value="POST">POST</label>
        </div>
    </div>

    <div class="form-group">
        <label for="">URL</label>
        <input type="text" class="form-control" v-model="f.url">
    </div>
    <div class="form-group">
        <label>参数</label>
        <div class="row field-row" v-for="(v,i) in list">
            <div class="col-xs-4"><input type="text" class="form-control" placeholder="key"></div>
            <div class="col-xs-4"><input type="text" class="form-control" placeholder="value"></div>
            <div class="col-xs-4">
                <button class="btn btn-default" @click="add">添加</button>
                <button class="btn btn-danger" @click="del(i)">删除</button>
            </div>
        </div>
    </div>
    <div class="form-group">
        <button class="btn btn-success" @click="sub">发送请求</button>
    </div>
    <div class="result">
        <h3>返回结果</h3>
        <pre v-show="result">{{result}}</pre>
    </div>

</div>
    
</body>
</html>
<script src="./assets/jquery3.2.1.min.js"></script>
<script src="./assets/vue2.6.11.min.js"></script>
<script>
new Vue({
    el:"#app",
    data:{
        f:{
            method:"GET",
            url:"http://",
        },
        list:[
            {
                key:"",
                value:"",
            }
        ],
        result:"",
    },
    methods:{
        add(){
            this.list.push({
                key:"",
                value:"",
            })
        },
        del(i){
            this.list.splice(i,1);
        },
        sub(){
            var f=this.f;
            var _this=this;
            var _data={};
            this.list.map(v=>{
                _data[v.key]=v.value;
            })
            $.ajax({
                    type: f.method,
                    url: f.url,
                    data: _data,
                    success: function(msg){
                        console.log(msg);
                        _this.result=msg;
                    },
                    fail(err){
                        console.log(err);
                        alert(err);
                    }
                });
        }
    }
})
</script>